<template>
  <div class="supply">
    <div v-if="this.id" class="rightEnterprise title_message">
      <h1 class="title">{{ message.title }}</h1>
      <p class="title_time">{{  getTime(message.createTime)}}</p>
      <div class="title_content">
        {{ message.content }}
      </div>
      <el-button class="btn" @click="back">返回</el-button>
    </div>
    <div class="rightEnterprise" v-else>
      <h1>三农资讯列表</h1>
      <div style="margin-top: 20px;">
        <ul>
            <li class="noticeList" v-for="item in homeList" :key="item.id" @click="jumpNews(item)">
                <span class="sp1">{{ item.title }}</span>
                <span class="sp2">{{getTime(item.createTime)}}</span>
            </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import homeApi from '../../api/apiHome';
import moment from 'moment'

 export default {
    data(){
      return {
        id:'',
        message:{},
        homeList:[],
        isHome:false
      }
    },
    methods:{
      async getHomeDetail(){
        const result =  await homeApi.getHomeDetail(this.id)
        if(result.code === 200){
          this.message = result.data
        }else{
          this.$message.error(result.msg)
        }
      },
      async getHomeList(){
          const result  =  await  homeApi.getHomeList(0)
          if(result.code!=200)return this.$message.error(result.msg)
          this.homeList = result.data
      },
      jumpNews(item){
        this.id = item.id
        this.getHomeDetail()
      },
      back(){
        if(this.isHome){
          this.id = ''
        }else{
          this.$router.go(-1)
        }
      }
    },
    mounted(){
      this.id = this.$route.query.id;
      if(this.id){
        this.getHomeDetail()
        this.isHome = false
      }else{
        this.isHome = true
        this.getHomeList()
      }
    },
    computed:{
      getTime(){
          return (time)=>{
              return moment(time).format('YYYY-MM-DD HH:mm')
          }
        }
    }
 }
</script>
<style lang="less" scoped>
.rightEnterprise{
  width: 100%;
  min-height: 100%;
  overflow: auto;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px;
  h1{
      text-align: center;
  }
  .noticeList{
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      color: #666;
      margin-bottom: 5px;
      padding:10px;
      &:hover{
        background-color:#f0f0f5;
      }
      cursor: pointer;
      .sp2{
          width: 120px;
          font-size: 14px;
          color: #999;
      }
      .sp1{
          flex: 1;
          white-space: nowarp;
          text-overflow: ellipsis;
          overflow: hidden;
      }
  }
  .title{
    text-align: center;
    width: 100%;
  }
  .title_time{
    text-align: right;
    width: 100%;
    line-height: 36px;
  }
  .title_content{
    line-height: 30px;
    text-indent: 4ch;
    letter-spacing: 3px;
    font-size: 16px;
    color: #333;
    font-weight: 500px;
  }
}
.title_message{
 box-sizing: border-box;
 padding: 40px;
 position: relative;
}
.btn{
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
}
</style>